<template>
  <div class="jifenDetail">
    <div class="title">全部</div>
    <div class="list">
      <ul>
        <li v-for="(item, index) in arrShow" :key="index">
          <section>
            <span>{{ item.title | fmtTitle }}</span>
            <span>{{ item.time }}</span>
            <span>{{ item.coin | fmtCoin }}</span>
          </section>
        </li>
      </ul>
    </div>
    <div class="footer">
      <pagination
        :total="total"
        :pageSize="pageSize"
        @change="changePagination"
      ></pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../Pagination.vue";
export default {
  components: { Pagination },
  props: {
    sign: Object,
  },
  data() {
    return {
      signArr: [],
      arrShow: [],
      total: 0,
      current: 1,
      pageSize: 10, // 每页显示数据pageSize
    };
  },
  created() {
    this.signArr = JSON.parse(localStorage.getItem("signArr"));
    this.total = this.signArr.length;
    this.showList();
  },
  methods: {
    changePagination(current) {
      // 接收到子组件改变的页码值，并修改
      this.current = current;
    },
    showList() {
      this.arrShow = this.signArr.filter(
        (item, index) => index < this.pageSize
      );
    },
  },
  filters: {
    fmtCoin(val) {
      return "+" + val;
    },
    fmtTitle(val) {
      return "签到" + val;
    },
  },
  watch: {
    current(current) {
      this.arrShow = [];
      for (
        let i = (current - 1) * this.pageSize;
        i < current * this.pageSize;
        i++
      ) {
        this.signArr[i] && this.arrShow.push(this.signArr[i]);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.jifenDetail {
  background: #fff;
  .title {
    height: 50px;
    color: #666666;
    background: #f2f2f2;
    text-align: center;
    line-height: 50px;
  }
  .list {
    ul {
      li {
        height: 40px;
        section {
          display: flex;
          box-sizing: border-box;
          span {
            height: 30px;
            margin: 10px auto;
            // flex: 1;
            line-height: 30px;
          }
        }
      }
    }
  }
  .footer {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }
}
</style>